<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="dataForm" class="dadeFrom">
        <el-input
          v-model="dataForm.groupName"
          placeholder="群组名称"
          style="width: 200px"
        ></el-input>
        <el-input
          v-model="dataForm.groupNum"
          placeholder="群组编号"
          style="width: 200px"
        ></el-input>
        <el-button @click="searchData()" type="primary">查询</el-button>
        <el-button @click="handleReset()" type="primary">重置</el-button>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top: 10px">
      <el-button type="success" size="mini" @click="hanlleAdd()"
        >创建群组</el-button
      >
      <el-button type="danger" size="mini" @click="handleDelete()"
        >批量删除</el-button
      >
      <el-table
        :data="dataList"
        style="width: 100%; margin-top: 20px"
        @selection-change="handleSelectionChange"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(12,42,98, 0.9)"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="dictName" label="群组名称" align="center">
        </el-table-column>
        <el-table-column prop="dictValue" label="群组编号" align="center">
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleEdit(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        :pageNum="pageNum"
        :pageSize="pageSize"
        @pageChange="pageChange"
      />
    </el-card>
    <!-- 弹窗, 新增 / 修改 -->
    <el-dialog title="群组配置" :visible.sync="dialogVisible" width="40%">
      <div>
        <div style="padding-left: 70px">
          群组名称：<el-input
            v-model="form.groupName"
            placeholder="群组名称"
            style="width: 200px"
          ></el-input>
        </div>
        <div style="margin-top: 20px">
          群组编号(主数据群组)：
          <el-input
            v-model="form.groupNum"
            placeholder="群组编号"
            style="width: 200px"
          ></el-input>
        </div>
        <div style="padding-left: 96px">
          备注：<el-input
            v-model="form.remark"
            type="textarea"
            :rows="2"
            placeholder="备注"
            style="width: 400px; margin-top: 20px"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false" size="mini">取 消</el-button> -->
        <el-button type="primary" @click="handleSubmit()" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      loading: true,
      dataList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      id: null,
      latnIdList: [],
      dialogVisible: false,
      ids: [],
      dataForm: {
        groupName: "",
        groupNum: "",
      },
      form: {
        groupName: "",
        groupNum: "",
        remark: "",
      },
    };
  },
  created() {
    // this.fetchTableList()
  },
  activated: function () {
    this.fetchTableList();
  },
  methods: {
    handleReset() {
      this.dataForm.groupName = "";
      this.dataForm.groupNum = "";
    },
    handleSubmit() {
      if (this.id) {
        this.fetchUpdateGroup();
      } else {
        this.fetchAddGroup();
      }
    },
    fetchAddGroup() {
      this.$http({
        url: this.$http.adornUrl("sysdictdata/save"),
        method: "post",
        data: this.$http.adornData({
          dictName: this.form.groupName,
          dictValue: this.form.groupNum,
          dictType: "user_tag",
          remark: this.form.remark,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.fetchTableList();
          this.dialogVisible = false;
        }
      });
    },
    fetchUpdateGroup() {
      this.$http({
        url: this.$http.adornUrl("sysdictdata/update"),
        method: "post",
        data: this.$http.adornData({
          id: this.id,
          dictName: this.form.groupName,
          dictValue: this.form.groupNum,
          dictType: "user_tag",
          remark: this.form.remark,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.fetchTableList();
          this.dialogVisible = false;
        }
      });
    },
    hanlleAdd() {
      this.id = null;
      this.form.groupName = "";
      this.form.groupNum = "";
      this.form.remark = "";
      this.dialogVisible = true;
    },
    // 多选
    handleSelectionChange(val) {
      this.ids = [];
      val.map((item) => {
        this.ids.push(item.id);
      });
    },
    // 点击搜索
    searchData() {
      this.fetchTableList();
    },
    // 获取表格数据
    fetchTableList() {
      this.loading = true;
      const { groupName, groupNum } = this.dataForm;
      this.$http({
        url: this.$http.adornUrl("sysdictdata/listByUserForSecretary"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageNum,
          limit: this.pageSize,
          dictName: groupName,
          dictValue: groupNum,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          setTimeout(() => {
            this.loading = false;
            this.total = data.page.totalCount;
            this.dataList = data.page.list;
          }, 1000);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //编辑
    handleEdit(id) {
      this.id = id;
      this.$http({
        url: this.$http.adornUrl(`sysdictdata/info/${id}`),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dialogVisible = true;
          this.form.groupName = data.sysDictData.dictName;
          this.form.groupNum = data.sysDictData.dictValue;
          this.form.remark = data.sysDictData.remark;
        }
      });
    },
    // 删除
    handleDelete(id) {
      let ids = [];
      if (id) {
        ids = [id];
      } else {
        ids = this.ids;
        if (ids.length == 0) {
          this.$message.error("请先选择要删除的选项");
          return false;
        }
      }
      this.$confirm(`您确定要删除吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("sysdictdata/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.fetchTableList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 再次提醒
    // 分页
    pageChange(page) {
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.fetchTableList();
    },
  },
};
</script>
<style scoped>
.el-dialog__body {
  padding: 0 20px;
}
</style>
